<template>
    <FormDetail
            ref="form"
            :loading="initDataLoading"
            label-position="left"
            label-width="150px"
            :form-items="formItems"
    ></FormDetail>
</template>

<script>
    import FormDetail from '../../../../common-util/src/components/page/FormDetail.vue'

    export default {
        components:{
            FormDetail
        },
        name: "FormDynamicDetail",
        computed:{
            formItems(){
                let r = []
                if(this.data){
                    // 表单属性
                    this.data.forEach(item=>{
                        let field = {
                            name: item.id,
                            value: item.value
                        }
                        let element = this.itemElement(item,field)
                        r.push({
                            field: field,
                            element: element
                        })
                    })
                }
                return r
            }
        },
        data(){
            return {
                dynamicQuery:{
                    processDefinitionId : this.$route.query.processDefinitionId,
                    taskId: this.$route.query.taskId,
                    isStartForm: (this.$route.query.isStartForm == undefined ? (this.$route.query.taskId? false: true): this.$route.query.isStartForm)
                },
                // 存储要渲染的表单结构数据，并通过计算属性转化为表单结构
                data: null,
                initDataLoading: false

            }
        },
        mounted(){
            this.initFormData()
        },
        methods:{
            itemElement(item,field){
                let element = {
                    label: item.name
                }
                switch (item.type.name) {
                    case 'string':{
                        element.type = 'text'
                        break
                    }
                    case 'long':{
                        element.type = 'text'
                        element.inputNumber={
                            min: -10000000,
                            max: 10000000
                        }
                        break
                    }
                    case 'boolean':{
                        element.type = 'text'
                        break
                    }
                    case 'date':{
                        element.type = 'text'
                        break
                    }
                    case 'enum':{
                        element.type = 'text'
                        let information = item.type.information

                        if(information){
                            field.value = information[field.value]
                        }
                        break
                    }
                }

                return element
            },
            // 加载要渲染的动态表单
            initFormData(){
                if(!this.dynamicQuery.taskId && !this.dynamicQuery.processDefinitionId){
                    this.$message.error('参数错误,流程定义id和任务id不能同时为空')
                    return
                }

                this.initDataLoading = true
                this.axios.get(this.$baseURL.workflow + '/workflow/form/dynamicForm',{params: this.dynamicQuery})
                    .then((res)=> {
                        this.data = res.data
                    }).catch(error=>{
                    if(error.response){
                        if(error.response.status == 401){
                            return
                        }
                        this.$message.error(error.response.data.msg)
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.initDataLoading = false
                })

            }
        }
    }
</script>

<style scoped>

</style>